<template>
    <div class="room">
        <el-card>
            <div slot="header">
                <h3>教室管理</h3>
            </div>

            <el-row>
                <el-col>
                    <el-button type="primary" @click="dialogVisible = true">
                        <i class="el-icon-plus"></i>
                        添加按钮</el-button
                    >
                </el-col>
            </el-row>

            <el-table :data="list" border style="margin-top: 15px">
                <el-table-column label="教室号" prop="sn"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scoped">
                        <el-button
                            type="text"
                            @click="onDeleteClicked(scoped.row.id)"
                            >删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <!-- dialogVisible 为 true 是显示弹框，为 false 是隐藏弹框 -->
        <el-dialog title="提示" :visible.sync="dialogVisible" width="60%">
            <el-input placeholder="请输入教室号" v-model="sn"></el-input>
            <span slot="footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="onSaveClicked"
                    >确 定</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "room",
    async created() {
        this.getList();
    },
    data() {
        return {
            list: [],
            dialogVisible: false,
            sn: "",
        };
    },
    methods: {
        async getList() {
            const res = await this.$http.get("/rooms");
            this.list = res.data.data;
            console.log(res);
        },
        onDeleteClicked(id) {
            this.$confirm("此操作将永久删除该教室, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    const res = await this.$http.delete(`/rooms/${id}`);
                    if (res.data.code !== 204) {
                        this.$message({
                            type: "error",
                            message: res.data.message,
                        });
                        return;
                    }

                    this.$message({
                        type: "success",
                        message: "删除成功!",
                    });

                    // 重新请求列表
                    this.getList();
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        async onSaveClicked() {
            const { sn } = this;
            if (!sn) {
                this.$message.error("请输入教室号");
                return;
            }
            const res = await this.$http.post("/rooms", { sn });
            if (res.data.code !== 201) {
                this.$message.error(res.data.message);
                return;
            }
            // 提示添加成功，并刷新列表
            this.$message.success("添加成功");
            this.getList();
            // 关闭弹框
            this.dialogVisible = false;
        },
    },
};
</script>

<style lang="less">
.room {
    min-height: 100vh;
    height: 100%;
    background-color: #f3f3f3;
}
</style>
